<template>
  <div>
    <!--  分隔-->
    <el-row>
      <el-col :span="24"><div class="grid-content bg-purple-light">
        <div style="float: left; margin: 20px 100px; font-weight: 700;color:#606266;font-size: 20px"><i class="el-icon-search"></i>订单查询</div>
      </div></el-col>
    </el-row>
    <!--  查询条件-->
      <el-form :inline="true" :model="queryForm" style="text-align: left; margin: 0 10%">
        <el-form-item label="委托单号">
          <el-input v-model="queryForm.orderId" placeholder="委托单号" clearable></el-input>
        </el-form-item>
        <el-form-item label="发货人">
          <el-input v-model="queryForm.consignorName" placeholder="发货人" clearable></el-input>
        </el-form-item>
        <el-form-item label="收货人">
          <el-input v-model="queryForm.consigneeName" placeholder="收货人" clearable></el-input>
        </el-form-item>
        <el-form-item label="当前状态">
          <el-input v-model="queryForm['currentStatus']" placeholder="当前状态" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="info" @click="getList" plain>查询</el-button>
          <el-button type="info" @click="add()" plain>新增</el-button>
        </el-form-item>
      </el-form>
    <!--  分隔-->
    <el-row>
      <el-col :span="24"><div class="grid-content bg-purple-light">
        <div style="float: left; margin: 0 100px; font-weight: 700;color:#606266;font-size: 20px"><i class="el-icon-s-unfold"></i>数据列表</div>
      </div></el-col>
    </el-row>
    <div id="s" class="animate__animated animate__zoomIn animate__delay-0.5s" style="margin-top: 20px">
      <!--  数据表格-->
      <el-table :data="tableData" stripe style="width: 100%;" :border="true"
                :header-cell-style="{background:'#209e91', color:'#ffffff',textAlign:'center'}">
        <el-table-column
          label="序号"
          width="50"
          align="center"
          type="index"
          :index="No"
          fixed>
        </el-table-column>
        <el-table-column
          prop="orderId"
          label="委托单编号"
          align="center"
          sortable
          width="200">
        </el-table-column>
        <el-table-column
          prop="customer.customerName"
          label="委托客户"
          align="center"
          width="250">
        </el-table-column>
        <el-table-column
          prop="transportType"
          label="订单类型"
          align="center"
          width="150">
        </el-table-column>
        <el-table-column
          prop="consignorName"
          label="发货人"
          align="center"
          width="150">
        </el-table-column>
        <el-table-column
          prop="consignorCity.mergerName"
          label="发货地址"
          align="center">
        </el-table-column>
        <el-table-column
          prop="consigneeName"
          label="收货人"
          align="center"
          width="150">
        </el-table-column>
        <el-table-column
          prop="consigneeCity.mergerName"
          label="收获地址"
          align="center">
        </el-table-column>
        <el-table-column
          prop="pickupDate"
          label="取货日期"
          align="center"
          sortable>
        </el-table-column>
        <el-table-column
          prop="currentStatus"
          label="当前状态"
          align="center"
          width="150">
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          width="180">
          <template v-slot="scope">
            <!--  是否显示编辑和删除按钮-->
            <el-button v-if="scope.row['currentStatus'] == '待调度' ? true : false" @click="edit(scope.row)" type="text" size="small">编辑</el-button>
            <el-popconfirm title="确定删除吗？" @confirm="remove(scope.row)">
              <el-button v-if="scope.row['currentStatus'] == '待调度' ? true : false" slot="reference" type="text" size="small">删除</el-button>
            </el-popconfirm>
            <el-button @click="check(scope.row)" type="text" size="small">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row>
        <el-col :span="24"><div class="grid-content bg-purple-light">
          <div style="margin: 20px"></div>
        </div></el-col>
      </el-row>
      <!--  分页-->
      <el-pagination
        @size-change="getList"
        @current-change="getList"
        :current-page.sync="queryForm.pageNum"
        :page-sizes="[10, 20, 30, 40, 60, 80, 100]"
        :page-size.sync="queryForm.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
      <el-row>
        <el-col :span="24"><div class="grid-content bg-purple-light">
          <div style="margin: 20px"></div>
        </div></el-col>
      </el-row>
    </div>
  </div>

</template>
<script>
export default {
  name: "OrderForm",
  data() {
    return {
      //查询对象
      queryForm: {
        // 委托订单Id
        orderId: '',
        // 发货人姓名
        consignorName: '',
        // 收货人姓名
        consigneeName: '',
        // 订单当前状态
        currentStatus: '',
        pageNum: 1,
        pageSize: 10
      },
      // 表格数组
      tableData: [],
      // 共多少条
      total: 0,
      // 显示修改删除按钮
      show: false,
    }
  },
  methods: {
    No(index) {
      // 当前页数 - 1 * 每页数据条数 + 1
      const page = this.queryForm.pageNum // 当前页码
      const pageSize = this.queryForm.pageSize // 每页条数
      return (page - 1) * pageSize+index + 1
    },

    // 获取订单列表
    getList() {
      this.$axios({
        url: 'order/form/list',
        method: 'post',
        data: this.queryForm
      }).then(res => {
        if (res.data.success) {
          this.tableData = res.data.object.list;
          this.total = res.data.object.total;
        }
      }).catch(err => {
        this.$message.error(err.message);
      })
    },
    // 添加订单
    add() {
      this.$store.commit('orderOperationType', 'addOrder')
      this.$router.push('OrderOperate')
    },
    // 添加订单
    edit(row) {
      this.$store.commit('orderOperationType', 'editOrder')
      this.$store.commit('currentOrder', row)
      this.$router.push('OrderOperate')
    },
    // 查看订单
    check(row){
      this.$store.commit('orderOperationType', 'checkOrder')
      this.$store.commit('currentOrder', row)
      this.$router.push('OrderOperate')
    },
    // 删除订单
    remove(row) {
      this.$axios({
        url: 'order/form/remove',
        method: 'post',
        data: row
      }).then(res => {
        if (res.data.success) {
          this.$message({
            message: res.data.message,
            type: 'success'
          });
          this.getList();
        } else {
          this.$message.error(res.data.message);
        }
      }).catch(err => {
        this.$message.error(err.message);
      })
    }
  },
  created() {
    this.getList()
  }
}
</script>

<style scoped>

.myBorder {
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  margin: 20px 100px;
}
.separate {
  float: left;font-size: 18px; margin: 7px; font-weight: bold;
}
.el-button--info:hover {
  background: #209e91;
  border-color: #209e91;
  color: #FFF;
}
#s{
  width:90%;
  margin:10px auto;
  background-color: #ffffff;
  box-shadow: 10px 10px 5px #c4c6c7;
  border-radius: 5px
}
</style>
